import React, { Component } from "react";
import { Button, Input, Icon, Table, Progress } from "antd";
import "./home.less";
import { formateDate } from "../../../utils/dateUtils";
import LinkButton from "../../../components/link-button";
const { Search } = Input;

const data = [
  {
    key: "1",
    name: "iok",
    type: "立即执行",
    creator: "xhr",
    asset: "1",
    timeConsuming: "5秒",
    plan: "100",
    state: "停止",
  },
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  getCheckboxProps: (record) => ({
    name: record.name,
  }),
};

class Sitetoscan extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const columns = [
      {
        title: "任务名称",
        dataIndex: "name",
        render: (text) => <LinkButton>{text}</LinkButton>,
      },
      {
        title: "任务类型",
        dataIndex: "type",
      },
      {
        title: "创建者",
        dataIndex: "creator",
      },
      {
        title: "存货资产数",
        dataIndex: "asset",
      },
      {
        title: "开始时间",
        dataIndex: "create_time",
        render: (create_time) => {
          if (formateDate(create_time)) {
            return formateDate(create_time);
          }
          return "2021-12-01 12:04";
        },
      },
      {
        title: "耗时",
        dataIndex: "timeConsuming",
      },
      {
        title: "进度",
        dataIndex: "plan",
        render: (text) => {
          return <Progress style={{ width: 200 }} percent={text} />;
        },
      },
      {
        title: "状态",
        dataIndex: "state",
      },
      {
        title: "操作项",
        dataIndex: "Actionitems",
        render: () => (
          <span>
            <LinkButton style={{ width: 40, color: "blue" }}>执行</LinkButton>
            <LinkButton
              style={{ width: 40, color: "blue" }}
              onClick={() => {
                this.props.history.push("/task/Sitetoscandetaile");
              }}
            >
              查看
            </LinkButton>
            <LinkButton style={{ width: 40, color: "red" }}>删除</LinkButton>
            <LinkButton style={{ width: 40, color: "blue" }}>编辑</LinkButton>
          </span>
        ),
      },
    ];
    return (
      <div className="home-wap">
        <div className="home-wap-top">
          <div className="home-wap-top-btn">
            <Button
              type="primary"
              onClick={() => {
                this.props.history.push("/task/Sitetoscannew");
              }}
            >
              新建
            </Button>
            <Button type="danger" style={{ marginLeft: 5 }}>
              删除
            </Button>
          </div>
          <div className="home-wap-top-right">
            <Search
              placeholder="请输入关键字"
              onSearch={(value) => console.log(value)}
              style={{ width: 200 }}
            />
            <Icon type="up" />
            <Icon type="setting" />
          </div>
        </div>
        <div className="home-bottom">
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={data}
          />
        </div>
      </div>
    );
  }
}

export default Sitetoscan;
